<template>
  <div class="investment-box">
    <div class="top-9"></div>
    <div class="investment-center">
      <div class="investment-state">
        <div class="investment-row">
          <span style="font-size: 18px; padding-right: 10px">投资类型 : </span>
          <el-button @click="search(all)">全部</el-button>
          <el-button @click="search(type)">车贷</el-button>
          <el-button @click="search(house)">房贷</el-button>
          <el-button @click="search(manage)">经营贷</el-button>
          <el-button @click="search(consumption)">消费贷</el-button>
        </div>

        <div class="investment-row">
          <span style="font-size: 18px; padding-right: 10px">还款方式 : </span>
          <el-button @click="find(all)">全部</el-button>
          <el-button @click="find(expire)">到期还本付息</el-button>
          <el-button @click="find(month)">按月付息,到期还本</el-button>
          <el-button @click="find(refund)">按月还款，等额本息</el-button>
          <el-button @click="find(money)">等额本金</el-button>
        </div>

        <div class="investment-row">
          <span style="font-size: 18px; padding-right: 10px">投资周期 : </span>
          <el-button @click="query(all)">全部</el-button>
          <el-button @click="query(March)">3个月以下</el-button>
          <el-button @click="query(June)">3-6个月</el-button>
          <el-button @click="query(July)">7-12个月</el-button>
          <el-button @click="query(December)">12个月以上</el-button>
        </div>
      </div>
    </div>

    <div class="investment_11">
      <el-table
        style="width: 100%; margin-top: 10px"
        :cell-style="cellStayle"
        :header-cell-style="{ background: 'silver', color: '#606266' }"
        :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
      >
        <el-table-column width="15"> </el-table-column>
        <el-table-column
          label="投资名称"
          width="180px"
          prop="propertyName"
        ></el-table-column>
        <el-table-column
          label="投资类型"
          width="120px"
          prop="propertyTypeName"
        ></el-table-column>
        <el-table-column label="年化收益率" width="120px" prop="yearYield">
          <template slot-scope="scope">
            <span v-if="scope.row.projectSchedule < 100" style="color: red"
              >{{ scope.row.yearYield }}%
            </span>
            <span v-else style="color: #333333"
              >{{ scope.row.yearYield }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column label="投资期限" width="120px" prop="propertyDeadline">
          <template slot-scope="scope">
            {{ scope.row.propertyDeadline }}个月
          </template>
        </el-table-column>
        <el-table-column label="剩余可投金额" width="120px" prop="residueMoney">
          <template slot-scope="scope"> {{ scope.row.residueMoney }}元 </template>
        </el-table-column>
        <el-table-column label="项目进度" width="170px" prop="projectSchedule">
          <template slot-scope="scope">
            <el-progress
              type="line"
              :stroke-width="8"
              :percentage="((scope.row.propertyResidue-scope.row.residueMoney)/scope.row.propertyResidue*100) | rounding"
              color="red"
            ></el-progress>
          </template>
        </el-table-column>
        <el-table-column
          label="还款方式"
          width="160px"
          prop="repaymentMethod"
        ></el-table-column>
        <el-table-column label="操作" width="198">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.residueMoney == 0"
              style="color: #999999"
              class="li-pager"
              >已满标</el-button
            >
            <el-button
              v-if="scope.row.residueMoney !=0"
              style="color: red; border-color: red"
              class="el-pager"
              @click="deitstimes(scope.row.propertyId)"
              >立即投资</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[4, 8, 12, 16, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; margin-left: 150px"
        :total="list.length"
      >
      </el-pagination>
    </div>
    <div class="popop"></div>
    <Bottom/>
  </div>
</template>

<script>
import axios from "axios";
import Bottom from "./Bottom.vue";
export default {
  filters: {
 rounding (value) {
 return value.toFixed(2)
 }
},
  data() {
    return {
      currentPage: 1, //初始页
      pagesize: 4, //每页条数
      list: [],
      isshow: true,
      all: "", //全部

      type: 1, //车贷
      house: 2, //房贷
      manage: 3, //经营贷
      consumption: 4, //消费贷

      expire: "到期还本付息", //到期还本付息
      month: "按月付息,到期还本", //按月付息,到期还本
      refund: "按月还款，等额本息", //按月还款，等额本息
      money: "等额本金", //等额本金
      March: "3个月以下", //三个月以下
      June: "3-6个月", //3-6个月
      July: "7-12个月", //7-12个月
      December: "12个月以上", //12个月以上
      one: "1", //三个月以下
      three: "3",
      June: "3", //3-6个月
      six: "6",
      July: "7", //7-12个月
      twelve: "12",
      December: "12", //12个月以上
    };
  },
  methods: {
    //查询数据
    findInvestList() {
      axios({
        url: "/api/invest/queryInvestmentList",
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },

    //类型条查
    search(type) {
      // alert(type)
      this.isshow = !this.isshow;
      axios({
        url: "/api/invest/queryInvestmentList",
        params: {
          propertyType: type,
        },
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },

    //还款方式查询
    find(expire) {
      // alert(expire)
      axios({
        url: "/api/invest/queryInvestmentList",
        params: {
          repaymentMethod: expire,
        },
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },
    query(min, max) {
      // alert(min)
      // alert(max)
      axios({
        url: "/api/invest/queryInvestmentList",
        params: {
          minDate: min,
          maxDate: max,
        },
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },

    handleSizeChange(size) {
      console.log(size, "size");
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange(currentPage) {
      console.log(currentPage, "currentPage");
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    cellStayle(row, colum, rowIndex, columnIndex) {
      if (row.row.projectSchedule == "100") {
        return "background-color : rgb(239, 238, 238)";
      }
    },
    deitstimes(val){   //立即投资代参跳页面
      // alert(val)
      this.$router.push({path:'InvestmentDetails',query:{propertyId:val}});  
    }
  },
  created() {
    this.findInvestList();
  },
  components: {
    Bottom,
  },
};
</script>

<style>
.popop{
  width: 100%;
  height: 100px;
  float: left;
}
.top-9{
  width: 100%;
  height: 50px;
  float: left;
}
.investment_11{
  width: 76%;
  float: left;
  margin-left: 12%;
  margin-top: 40px;
}
.investment-box {
  width: 100%;
  
  background-color: #f6f6f6;
  float: left;
}
.investment-center {
  width: 70%;
  background-color: white;
  margin-left: 15%;
  margin-top: 30px;
  float: left;
  
}

.investment-row {
  margin-top: 30px;
  padding-top: 30px;
  margin-left: 4%;
  margin-bottom: 30px;
}
.investment-state {
  width: 100%;
  height: 15%;
}
</style>